import React, {PureComponent} from "react";
import {connect} from "react-redux";
import {Modal, Table, Tabs} from "antd";
import FormEditor from '../../components/FormEditor';
import {hideEdit} from "./actions";
import {tableProps} from "../../lib/ui";

const {TabPane} = Tabs;

class ModifyModal extends PureComponent {

    handleCancel = () => {
        const {dispatch} = this.props;
        dispatch(hideEdit());
    };

    render() {
        const {loading, visible, model} = this.props;
        const schema = [
            {
                title: '订单信息',
                fields: [
                    {
                        field: 'organizationName',
                        title: '所属机构',
                        readonly: true
                    }, {
                        field: 'bookNo',
                        title: '订舱号',
                        readonly: true
                    }, {
                        field: 'businessType',
                        title: '业务类型',
                        readonly: true
                    }, {
                        field: 'calculateType',
                        title: '计费方式',
                        readonly: true
                    }, {
                        field: 'sendTime',
                        title: '发车日期',
                        readonly: true
                    }, {
                        field: 'blTime',
                        title: '班列日期',
                        readonly: true
                    }, {
                        field: 'startPlace',
                        title: '始发地',
                        readonly: true
                    }, {
                        field: 'endPlace',
                        title: '目的地',
                        readonly: true
                    }, {
                        field: 'packageNo',
                        title: '柜号',
                        readonly: true
                    }, {
                        field: 'pickPlace',
                        title: '提货地',
                        readonly: true
                    }, {
                        field: 'destPlace',
                        title: '最终目的地',
                        readonly: true
                    }, {
                        field: 'arriveTime',
                        title: '到站时间',
                        readonly: true
                    }, {
                        field: 'pickTime',
                        title: '提箱时间',
                        readonly: true
                    }, {
                        field: 'keepDays',
                        title: '额外储存天数',
                        readonly: true
                    }, {
                        field: 'remark',
                        title: '备注',
                        readonly: true
                    }
                ]
            }];

        const columns = [
            {
                title: "费用科目",
                dataIndex: "feeName",
                width: "150px",
            }, {
                title: "金额",
                dataIndex: "feeCount",
                width: "150px"
            }, {
                title: "供应商",
                dataIndex: "feeCarrier",
                width: "150px"
            }, {
                title: "",
                dataIndex: ""
            }
        ];

        const feeDataSource = [];

        // 运输费
        feeDataSource.push({
            "feeName": "运费（USD）",
            "feeCount": model.transportFee1,
            "feeCarrier": model.transportFeeCarrier || ""
        });
        feeDataSource.push({
            "feeName": "运费（RMB）", "feeCount": model.transportFee2,
            "feeCarrier": model.transportFeeCarrier || ""
        });
        // DTHC
        feeDataSource.push({
            "feeName": "DTHC（USD）", "feeCount": model.dthc,
            "feeCarrier": model.dthcCarrier || ""
        });
        // 报关费
        feeDataSource.push({
            "feeName": "报关费(USD)", "feeCount": model.bgFee1,
            "feeCarrier": model.bgCarrier || ""
        });
        feeDataSource.push({
            "feeName": "报关费(RMB)", "feeCount": model.bgFee2,
            "feeCarrier": model.bgCarrier || ""
        });
        feeDataSource.push({
            "feeName": "报关费续页(RMB)", "feeCount": model.bgFee3,
            "feeCarrier": model.bgCarrier || ""
        });
        // 查验费
        feeDataSource.push({
            "feeName": "查验费(USD)", "feeCount": model.checkFee1,
            "feeCarrier": model.checkCarrier || ""
        });
        feeDataSource.push({
            "feeName": "查验费(RMB)", "feeCount": model.checkFee2,
            "feeCarrier": model.checkCarrier || ""
        });
        // 其他费用
        feeDataSource.push({
            "feeName": "其他费用（USD)", "feeCount": model.otherFee1,
            "feeCarrier": model.otherCarrier || ""
        });
        feeDataSource.push({
            "feeName": "其他费用（RMB)", "feeCount": model.otherFee2,
            "feeCarrier": model.otherCarrier || ""
        });
        // 堆存费
        feeDataSource.push({
            "feeName": "堆存费（USD）", "feeCount": model.dcFee1,
            "feeCarrier": model.dcCarrier || ""
        });
        feeDataSource.push({
            "feeName": "堆存费（RMB）", "feeCount": model.dcFee2,
            "feeCarrier": model.dcCarrier || ""
        });
        feeDataSource.push({
            "feeName": "国内费用（RMB）", "feeCount": model.domesticFee,
            "feeCarrier": model.domesticCarrier || ""
        });
        return (
            <Modal
                title="详情"
                visible={visible}
                onCancel={this.handleCancel}
                confirmLoading={loading}
                footer={null}
                width="80%"
            >
                <Tabs defaultActiveKey="1">
                    <TabPane tab="订单详情" key="1">
                        <FormEditor
                            schema={schema}
                            column={3}
                            defaultReadonly={false}
                            showActionBar={false}
                            defaultValues={model}
                            wrappedComponentRef={inst => (this.formEditor = inst)}
                        />
                    </TabPane>
                    <TabPane tab="应付详情" key="2">
                        <Table
                            {...tableProps}
                            columns={columns}
                            dataSource={feeDataSource}
                            loading={loading}
                        />
                    </TabPane>
                </Tabs>
            </Modal>
        );
    }
}

const mapStateToProps = state => {
    return {
        ...state.hisZadOrderPayable.modify
    };
};


export default connect(mapStateToProps)(ModifyModal);
